<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <script src="./cofig/jquery-3.6.0.js"></script>
    <script src="./cofig/pixi.js"></script>
    <script src="./cofig/fun.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin-top: 50px;
        min-width: 50%;
        outline: 1px solid black;
      }
      h2,
      p {
        text-align: center;
        margin: 0 auto;
      }
      p {
        font-size: 20px;
      }
      .suo {
        font-size: 18px;
        position: absolute;
        top: 10px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <h2>打开页面的钥匙似乎被怪物给藏起来了</h2>
    <p>控制英雄找到钥匙！钥匙就在不远处，加油！</p>
    <div class="suo">
      移动：
      <div style="margin-left: 25px">↑</div>
      <div><span>←</span><span style="margin-left: 20px">→</span></div>
      射击：0
    </div>
  </body>
  <script>
    function random(n, m) {
      return Math.floor(Math.random() * (m - n + 1) + n);
    }
    let app = new PIXI.Application({
      width: window.innerWidth * 0.8, // default: 800 宽度
      height: window.innerHeight * 0.8, // default: 600 高度
      antialias: false, // default: false 反锯齿
      transparent: false, // default: false 透明度
      resolution: window.devicePixelRatio || 1, // default: 1 分辨率
      backgroundColor: 0xffffff,
    });
    document.body.appendChild(app.view);
    $("canvas").css({
      marginLeft: window.innerWidth / 2 - (window.innerWidth * 0.8) / 2,
    });
    let bj = PIXI.Sprite.from("./img/怪物/背景/20110Q13533-2-1200.png");
    bj.x = 0; //设置精灵位置
    bj.y = -window.innerHeight * 0.2;
    bj.width = window.innerWidth * 2;
    bj.height = window.innerHeight * 1;
    app.stage.addChild(bj);

    PIXI.Assets.add("mi", "./img/怪物/人物3/站立/1.png");
    PIXI.Assets.add("mi1", "./img/怪物/人物3/站立/2.png");
    PIXI.Assets.add("mi2", "./img/怪物/人物3/站立/3.png");
    PIXI.Assets.add("mi3", "./img/怪物/人物3/站立/4.png");
    PIXI.Assets.add("zou", "./img/怪物/人物3/行走/1.png");
    PIXI.Assets.add("zou1", "./img/怪物/人物3/行走/2.png");
    PIXI.Assets.add("sheji1", "./img/怪物/人物3/射击/1.png");
    PIXI.Assets.add("sheji2", "./img/怪物/人物3/射击/2.png");
    PIXI.Assets.add("sheji3", "./img/怪物/人物3/射击/3.png");
    PIXI.Assets.add("sheji4", "./img/怪物/人物3/射击/4.png");
    PIXI.Assets.add("sheji5", "./img/怪物/人物3/射击/5.png");
    PIXI.Assets.add("sheji6", "./img/怪物/人物3/射击/6.png");
    PIXI.Assets.add("guaishou1", "./img/怪物/怪物1/1.png");
    PIXI.Assets.add("guaishou2", "./img/怪物/怪物1/2.png");
    PIXI.Assets.add("guaishou3", "./img/怪物/怪物1/3.png");
    PIXI.Assets.add("guaishou4", "./img/怪物/怪物1/4.png");
    PIXI.Assets.add("guaishou5", "./img/怪物/怪物1/5.png");
    PIXI.Assets.add("jian1", "./img/怪物/箭/1.png");
    PIXI.Assets.add("jian2", "./img/怪物/箭/2.png");
    PIXI.Assets.add("bianfu", "./img/怪物/怪物3/1.png");
    PIXI.Assets.add("bianfu2", "./img/怪物/怪物3/2.png");
    PIXI.Assets.add("chiwei", "./img/怪物/怪物4/1.png");
    PIXI.Assets.add("chiwei2", "./img/怪物/怪物4/2.png");
    PIXI.Assets.add("yaoshi1", "./img/怪物/钥匙/1.png");
    PIXI.Assets.add("yaoshi2", "./img/怪物/钥匙/2.png");
    PIXI.Assets.add("yaoshi3", "./img/怪物/钥匙/3.png");
    PIXI.Assets.add("yaoshi4", "./img/怪物/钥匙/4.png");
    PIXI.Assets.add("yaoshi5", "./img/怪物/钥匙/5.png");

    let textusePromise = PIXI.Assets.load(
      [
        "mi",
        "mi1",
        "mi2",
        "mi3",
        "zou",
        "zou1",
        "sheji1",
        "sheji2",
        "sheji3",
        "sheji4",
        "sheji5",
        "sheji6",
        "guaishou1",
        "guaishou2",
        "guaishou3",
        "guaishou4",
        "guaishou5",
        "jian1",
        "jian2",
        "bianfu",
        "bianfu2",
        "chiwei",
        "chiwei2",
        "yaoshi1",
        "yaoshi2",
        "yaoshi3",
        "yaoshi4",
        "yaoshi5",
      ],
      function (progress) {
        console.log("加载完成");
      }
    );
    textusePromise.then((texture) => {
      let rongqi = new PIXI.Container(); //人物容器
      let mi_arr = [texture.mi, texture.mi1, texture.mi2, texture.mi3];
      let mi_zl = new PIXI.AnimatedSprite(mi_arr);
      mi_zl.loop = true;
      mi_zl.animationSpeed = 0.1;
      mi_zl.play();
      mi_zl.anchor.set(0.5, 0.5); //锚点
      mi_zl.x = app.screen.width * 0.3; //设置精灵位置
      mi_zl.y = app.screen.height * 0.8;
      mi_zl.width = 100;
      mi_zl.height = 100;
      rongqi.addChild(mi_zl);

      let bianfu_arr = [texture.bianfu, texture.bianfu2];
      let bianfu = new PIXI.AnimatedSprite(bianfu_arr);
      bianfu.loop = true;
      bianfu.animationSpeed = 0.1;
      bianfu.play();
      bianfu.anchor.set(0.5, 0.5); //锚点
      bianfu.x = app.screen.width * 1; //设置精灵位置
      bianfu.y = app.screen.height * 0.5;
      bianfu.width = 100;
      bianfu.height = 100;
      rongqi.addChild(bianfu);

      let chiweiarr = [texture.chiwei, texture.chiwei2];
      let chiwei = new PIXI.AnimatedSprite(chiweiarr);
      chiwei.loop = true;
      chiwei.animationSpeed = 0.5;
      chiwei.play();
      chiwei.anchor.set(0.5, 0.5); //锚点
      chiwei.x = app.screen.width * -1; //设置精灵位置
      chiwei.y = app.screen.height * 0.8;
      chiwei.width = 200;
      chiwei.height = 120;
      rongqi.addChild(chiwei);

      let xingzou_arr = [texture.zou, texture.zou1];
      let xingzou = new PIXI.AnimatedSprite(xingzou_arr);
      xingzou.loop = true;
      xingzou.animationSpeed = 0.1;
      xingzou.play();
      xingzou.anchor.set(0.5, 0.5); //锚点
      xingzou.x = mi_zl.x; //设置精灵位置
      xingzou.y = mi_zl.y;
      xingzou.width = 100;
      xingzou.height = 100;
      xingzou.visible = false;
      rongqi.addChild(xingzou);

      let yaoshi_arr = [
        texture.yaoshi1,
        texture.yaoshi2,
        texture.yaoshi3,
        texture.yaoshi4,
        texture.yaoshi5,
      ];
      let yaoshi = new PIXI.AnimatedSprite(yaoshi_arr);
      yaoshi.loop = true;
      yaoshi.animationSpeed = 0.1;
      yaoshi.play();
      yaoshi.anchor.set(0.5, 0.5); //锚点
      yaoshi.x = app.screen.width * 2; //设置精灵位置
      yaoshi.y = app.screen.height * 0.8 - 50;
      yaoshi.width = 100;
      yaoshi.height = 200;
      rongqi.addChild(yaoshi);

      //----射击
      let sheji_arr = [
        texture.sheji1,
        texture.sheji2,
        texture.sheji3,
        texture.sheji4,
        texture.sheji5,
        texture.sheji6,
      ];
      let sheji = new PIXI.AnimatedSprite(sheji_arr);
      sheji.loop = true;
      sheji.animationSpeed = 0.1;
      sheji.play();
      sheji.anchor.set(0.5, 0.5); //锚点
      sheji.x = mi_zl.x; //设置精灵位置
      sheji.y = mi_zl.y;
      sheji.width = 100;
      sheji.height = 100;
      sheji.visible = false;
      rongqi.addChild(sheji);
      let guaishouarr = [
        texture.guaishou1,
        texture.guaishou2,
        texture.guaishou3,
        texture.guaishou4,
        texture.guaishou5,
      ];
      let guaishou = new PIXI.AnimatedSprite(guaishouarr);
      guaishou.animationSpeed = 0.1;
      guaishou.play();
      guaishou.anchor.set(0.5, 0.5); //锚点
      guaishou.x = app.screen.width * 0.6; //设置精灵位置
      guaishou.y = app.screen.height * 0.8;
      guaishou.width = 100;
      guaishou.height = 100;
      rongqi.addChild(guaishou);
      //------------箭
      let sej = [texture.jian1, texture.jian2];
      let shejian = new PIXI.AnimatedSprite(sej);
      shejian.animationSpeed = 0.1;
      shejian.play();
      shejian.anchor.set(0.5, 0.5); //锚点
      shejian.x = sheji.x; //设置精灵位置
      shejian.y = sheji.y;
      shejian.width = 100;
      shejian.height = 40;
      shejian.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
      shejian.scale.x *= -1;
      shejian.visible = false;
      rongqi.addChild(shejian);
      //-----------

      //---------------创建键盘事件和速度

      let goright = 0;
      let golift = 0;
      let topvx = 0;
      tiaoyue = true;
      let fangxiang = false;
      let left1 = jianpan("ArrowLeft");
      let right1 = jianpan("ArrowRight");
      let top1 = jianpan("ArrowUp");
      let shejidow = jianpan("0");
      let jian_x = 0;
      let jian_y = 0;
      let jian_zt = true;
      let jian_fangxiang = false;
      let bainfu_x = random(10, 12) / 10;
      let bianfu_y = 0.1;
      top1.press = () => {
        if (tiaoyue) {
          topvx = 10;
          tiaoyue = false;
          let io = setTimeout(() => {
            topvx = 0;
            tiaoyue = true;
          }, 200);
        }
      };
      top1.release = () => {
        topvx = 0;
      };
      shejidow.press = () => {
        if (jian_zt) {
          jian_zt = false;
          shejian.visible = true;
          jian_x = 8;
          jian_y = 0.3;
          let jian_time2 = setTimeout(() => {
            jian_y = 1.5;
          }, 300);
          let jian_time = setTimeout(() => {
            jian_x = 0;
            shejian.visible = false;
            jian_zt = true;
          }, 800);
        }
      };
      shejidow.release = () => {
        sheji.visible = false;
        mi_zl.visible = true;
        xingzou.visible = false;
      };
      left1.press = () => {
        golift = 2;
        if (fangxiang == true) {
          fangxiang = false;
          xingzou.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          xingzou.scale.x *= -1;
          mi_zl.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          mi_zl.scale.x *= -1;
          sheji.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          sheji.scale.x *= -1;

          if (jian_zt) {
            shejian.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
            shejian.scale.x *= -1;
            jian_fangxiang = fangxiang;
          }
        }
      };
      left1.release = () => {
        golift = 0;
      };
      right1.press = () => {
        goright = 2;

        if (fangxiang == false) {
          fangxiang = true;
          xingzou.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          xingzou.scale.x *= -1;
          mi_zl.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          mi_zl.scale.x *= -1;
          sheji.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
          sheji.scale.x *= -1;

          if (jian_zt) {
            shejian.anchor.x = 0.5; /* 0 = top, 0.5 = center, 1 = bottom */
            shejian.scale.x *= -1;
            jian_fangxiang = fangxiang;
          }
        }
      };
      right1.release = () => {
        goright = 0;
      };
      app.stage.addChild(rongqi);
      app.ticker.add((dalte) => {
        //进行状态

        if (xingzou.y < app.screen.height * 0.8) {
          xingzou.y += 5;
        }
        if (left1.isDown || right1.isDown) {
          mi_zl.visible = false;
          xingzou.visible = true;
        } else if (left1.isUp || right1.isUp) {
          //   {
          mi_zl.visible = true;
          xingzou.visible = false;
        }
        if (shejidow.isDown) {
          sheji.play();
          mi_zl.visible = false;
          xingzou.visible = false;
          sheji.visible = true;
        } else if (shejidow.isUp) {
        }
        if (pengzhuang(guaishou, shejian)) {
          if (guaishou.visible == true) {
            if (shejian.visible == true) {
              shejian.visible = false;
              guaishou.visible = false;
            }
          }
        }
        if (pengzhuang(chiwei, shejian)) {
          if (chiwei.visible == true) {
            if (shejian.visible == true) {
              shejian.visible = false;
              chiwei.visible = false;
            }
          }
        }
        if (pengzhuang(bianfu, shejian)) {
          if (bianfu.visible == true) {
            if (shejian.visible == true) {
              shejian.visible = false;
              bianfu.visible = false;
              let bianfu_s = setTimeout(() => {
                bianfu.x = app.screen.width * 1.2; //设置精灵位置
                bianfu.y = app.screen.height * 0.4;
                bainfu_x = random(10, 12) / 10;

                bianfu.visible = true;
              }, 3000);
            }
          }
        }
        if (pengzhuang(guaishou, xingzou)) {
          if (guaishou.visible == true) {
            guaishou.visible = false;
            alert("失败");
          }
        }
        if (pengzhuang(bianfu, xingzou)) {
          if (bianfu.visible == true) {
            bianfu.visible = false;
            alert("失败");
          }
        }
        if (pengzhuang(chiwei, xingzou)) {
          if (chiwei.visible == true) {
            chiwei.visible = false;
            alert("失败");
          }
        }
        if (pengzhuang(yaoshi, xingzou)) {
          if (yaoshi.visible == true) {
            yaoshi.visible = false;
            alert("成功");
            window.open("./w_index2.html");
          }
        }
        if (xingzou.x > app.screen.width * 0.8 - 400) {
          if (right1.isDown) {
            bj.x -= goright;
            bianfu.x -= goright;
            yaoshi.x -= goright;
          }
        } else {
          xingzou.x += goright;
        }
        if (xingzou.x < app.screen.width * 0.5 - 400) {
          if (left1.isDown) {
            bj.x += golift;
            bianfu.x += golift;
            yaoshi.x += golift;
          }
        } else {
          xingzou.x -= golift;
        }
        mi_zl.x = xingzou.x;
        mi_zl.y = xingzou.y;
        sheji.x = mi_zl.x;
        sheji.y = mi_zl.y; //设置精灵位置
        if (shejian.visible == false) {
          shejian.x = mi_zl.x; //设置精灵位置
          shejian.y = mi_zl.y;
        }
        if (shejian.visible == true) {
          if (jian_fangxiang == false) {
            shejian.x -= jian_x; //
            shejian.y += jian_y;
          } else if (jian_fangxiang == true) {
            shejian.x += jian_x; //
            shejian.y += jian_y;
          }
        }
        if (bianfu.x > app.screen.width * 0.3) {
          bianfu.y += bianfu_y + 0.2;
        } else {
          bianfu.y -= bianfu_y;
        }
        if (bianfu.x < app.screen.height * 0) {
          bianfu.x = app.screen.width * 1.2; //设置精灵位置
          bianfu.y = app.screen.height * 0.4;
          bainfu_x = random(10, 12) / 10;
        }
        bianfu.x -= bainfu_x;
        chiwei.x += 1.5;
        xingzou.y -= topvx;
      });
    });
  </script>
</html>
